<!DOCTYPE html>
<head>
	<title>bootstrap</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">


	<style type="text/css">

	</style>
</head>
<body>
	<button>Hello</button>
	<button class="btn ">Hello</button>
	<button class="btn-link btn">Hello</button>
	<button class="btn-primary btn">Hello</button>
	<button class="text-success btn btn-success">Hello</button>
	<button class="btn-info btn">Hello</button>
	<button class="btn-warning btn">Hello</button>
	<button class="btn-danger btn" disabled="disabled">Hello</button>
	<!-- <div class="container table-responsive">
		<div class="row">
			<div class="col-xs-3 col-md-3 text-success bg-success">Hello你好</div>
			<div class="col-xs-3 col-md-3 text-success bg-warning">bb</div>
		</div>
		<div class="row">
			<span class="glyphicon glyphicon-search"></span>
			<span class="glyphicon glyphicon-star-empty"></span>
			<span class="glyphicon glyphicon-star"></span>
			<span class="glyphicon glyphicon-zoom-in"></span>
			<span class="glyphicon glyphicon-trash"></span>
			<span class="glyphicon glyphicon-download-alt"></span>
			<span class="glyphicon glyphicon-heart"></span>
			<span class="glyphicon glyphicon-font"></span>
			<span class="glyphicon glyphicon-phone-alt"></span>
		</div>
		<table class="table table-striped table-bordered table-hover table-condensed">
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
			<tr>
				<th>1</th>
				<td>Mark</td>
				<td>Otto</td>
				<td>@mdo</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Jacob</td>
				<td>Thornton</td>
				<td>@fat</td>
			</tr>
			<tr class="warning">
				<th>3</th>
				<td>Mark</td>
				<td>Otto</td>
				<td>@mdo</td>
			</tr>
		</table>
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label>
				<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label>
				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			</div>
			<div class="form-group">
				<label for="exampleInputFile">File input</label>
				<input type="file" id="exampleInputFile">
				<p class="help-block">Example block-level help text here.</p>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"> Check me out
				</label>
				<label>
					<input type="checkbox"> Check me out
				</label>
			</div>
			<div class="radio">
				
				<label>
					<input type="radio"> Check me out
				</label>
				<label>
					<input type="radio"> Check me out
				</label>
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>

		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
				<div class="input-group">
					<div class="input-group-addon">$</div>
					<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
					<div class="input-group-addon">.00</div>
				</div>
			</div>
			<button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>

		<form class="form-horizontal">
			<div class="form-group">
				<label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>
				<div class="col-sm-10">
					<input type="email" class="form-control  control-label" id="exampleInputEmail1" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control  control-label" id="exampleInputPassword1" placeholder="password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<select class="form-control">
					<option>芜湖</option>
					<option>合肥</option>
					<option>黄山</option>
				</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-4">
					<textarea class="form-control" rows="5"></textarea>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox"> Remember me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Submit</butto
				</div>
			</div>
		</form>
	</div>	 -->


	<div class="container">
		<div class="dropdown">
			<button class="btn btn-default" data-toggle="dropdown">
				Dropdown
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>

		<!-- Split button -->
		<div class="btn-group">
		  <button type="button" class="btn btn-danger">Action</button>
		  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu">
		    <li><a href="#">Action</a></li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>


		<ul id="myTabs" class="nav nav-tabs">
		  <li role="presentation" class="active"><a href="#">Home</a></li>
		  <li role="presentation"><a href="#">Profile</a></li>
		  <li role="presentation"><a href="#">Messages</a></li>
		</ul>
		<div>
			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
				<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
				<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
				<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane fade in active" id="home">...<p style="height: 200px;background-color: orange">ggg</p></div>
				<div role="tabpanel" class="tab-pane fade" id="profile">...<p style="height: 200px;background-color: orange">ggg</p></div>
				<div role="tabpanel" class="tab-pane fade" id="messages">...<p style="height: 200px;background-color: orange">ggg</p></div>
				<div role="tabpanel" class="tab-pane fade" id="settings">...<p style="height: 200px;background-color: orange">ggg</p></div>
			</div>
		</div>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
	</div>
</body>
</html>